<template>
  <div class="mobile-take-sheet-index">
    <page-wrapper content-full-height fixed-height>
      <div v-loading="loading">
        <!-- 搜索表单 -->
        <j-border class="form-border">
          <j-form layout="vertical">
            <j-form-item label="单据号" :span="24" :contentNest="false">
              <a-input
                v-model:value="searchFormData.code"
                placeholder="请输入单据号"
                allow-clear
              />
            </j-form-item>
            <j-form-item label="关联盘点任务号" :span="24" :contentNest="false">
              <a-input
                v-model:value="searchFormData.planCode"
                placeholder="请输入关联盘点任务号"
                allow-clear
              />
            </j-form-item>
            <div class="search-btn-container">
              <a-button type="primary" @click="search" style="width: 100%">
                查询
              </a-button>
            </div>
          </j-form>
        </j-border>

        <!-- 工具栏 -->
        <div class="toolbar">
          <a-button
            type="primary"
            :icon="h(PlusOutlined)"
            class="add-btn"
            @click="addSheet"
          >
            新增盘点单
          </a-button>
        </div>

        <!-- 数据列表 -->
        <vxe-grid
          ref="grid"
          show-overflow
          highlight-hover-row
          row-id="id"
          :data="tableData"
          :columns="tableColumn"
          :loading="loading"
        >
          <!-- 操作列 -->
          <template #action_default="{ row }">
            <a-space size="middle">
              <a-button size="small" @click="viewSheet(row.id)">查看</a-button>
              <a-button size="small" danger @click="deleteSheet(row.id)" v-if="canDelete(row.status)">删除</a-button>
            </a-space>
          </template>
        </vxe-grid>

        <!-- 分页 -->
        <div class="pagination">
          <a-pagination
            v-model:current="currentPage"
            v-model:pageSize="pageSize"
            :total="totalCount"
            :pageSizeOptions="['10', '20', '50']"
            @change="handlePageChange"
            @showSizeChange="handleSizeChange"
            size="small"
          />
        </div>
      </div>
    </page-wrapper>
  </div>
</template>

<script lang="ts">
import { h, defineComponent, reactive, toRefs, getCurrentInstance } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import * as api from '@/api/sc/stock/take/sheet';
import { multiplePageMix } from '@/mixins/multiplePageMix';

const pageSizeOptions = ['10', '20', '50'];

export default defineComponent({
  name: 'MobileTakeSheetIndex',
  mixins: [multiplePageMix],
  setup() {
    const { proxy } = getCurrentInstance() as any;
    const enums = proxy.$enums;
    
    const state = reactive({
      loading: false,
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      searchFormData: {
        code: '',
        planCode: '',
      },
      tableData: [],
      tableColumn: [
        {
          field: 'code',
          title: '单据号',
          width: 150,
        },
        {
          field: 'planCode',
          title: '关联盘点任务',
          width: 150,
        },
        {
          field: 'takeStatus',
          title: '盘点状态',
          width: 100,
          formatter: ({
            cellValue,
          }: {
            cellValue: any;
          }) => {
            return enums.TAKE_STOCK_PLAN_STATUS.getDesc(cellValue);
          },
        },
        {
          field: 'takeType',
          title: '盘点类别',
          width: 100,
          formatter: ({
            cellValue,
          }: {
            cellValue: any;
          }) => {
            return enums.TAKE_STOCK_PLAN_TYPE.getDesc(cellValue);
          },
        },
        {
          field: 'status',
          title: '状态',
          width: 100,
          formatter: ({
            cellValue,
          }: {
            cellValue: any;
          }) => {
            return enums.TAKE_STOCK_SHEET_STATUS.getDesc(cellValue);
          },
        },
        {
          field: 'updateTime',
          title: '操作时间',
          width: 180,
        },
        {
          title: '操作',
          width: 150,
          slots: { default: 'action_default' },
        },
      ],
    });

    return { ...toRefs(state), h, PlusOutlined };
  },
  created() {
    this.search();
  },
  methods: {
    // 查询列表
    search() {
      this.loading = true;
      const params = this.buildQueryParams();
      api
        .query(params)
        .then((res) => {
          this.tableData = res.datas || [];
          this.totalCount = res.totalCount || 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 构建查询参数
    buildQueryParams() {
      return {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchFormData,
      };
    },

    // 新增盘点单
    addSheet() {
      this.$router.push('/mobile/take/sheet/add');
    },

    // 查看盘点单
    viewSheet(id: string) {
      this.$router.push(`/mobile/take/sheet/detail/${id}`);
    },

    // 删除盘点单
    deleteSheet(id: string) {
      this.$msg.createConfirm('确定要删除此盘点单吗？').then(() => {
        this.loading = true;
        api
          .deleteById(id)
          .then(() => {
            this.$msg.createSuccess('删除成功！');
            this.search();
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },

    // 判断是否可以删除
    canDelete(status: string) {
      return (
        this.$enums.TAKE_STOCK_SHEET_STATUS.CREATED.equalsCode(status) ||
        this.$enums.TAKE_STOCK_SHEET_STATUS.APPROVE_REFUSE.equalsCode(status)
      );
    },

    // 分页变化
    handlePageChange(page: number) {
      this.currentPage = page;
      this.search();
    },

    // 每页条数变化
    handleSizeChange(current: number, size: number) {
      this.pageSize = size;
      this.currentPage = current;
      this.search();
    },
  },
});
</script>

<style scoped lang="less">
.mobile-take-sheet-index {
  padding: 12px;
  font-size: 16px; // 增加基础字体大小

  // 表单相关样式
  .form-border {
    margin-bottom: 15px;
    padding: 10px;
  }

  .ant-form-item-label > label {
    font-size: 16px; // 表单标签字体大小
  }

  // 搜索按钮样式
  .search-btn-container {
    margin-top: 10px;
  }

  // 工具栏样式
  .toolbar {
    margin-bottom: 15px;
  }

  .add-btn {
    width: 100%;
    font-size: 16px; // 添加按钮字体大小
    height: 44px;
  }

  // 表格样式调整
  :deep(.vxe-table) {
    font-size: 16px; // 表格字体大小
    margin-bottom: 15px;
  }

  // 分页样式
  .pagination {
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }

  // 输入框样式
  .ant-input {
    font-size: 16px; // 输入框字体大小
  }
}
</style>